<nuwa-toolbar (onSave)="handleSave()" [(scale)]="scale" [canvas]="canvas" [project]="project"></nuwa-toolbar>
<div class="body">
    <nuwa-side-bar [index]="1" [width]="300">

        <nuwa-pages (onPageChange)="handlePageChange($event)" *sideBarItem="'页面'" [project]="project"></nuwa-pages>

        <nuwa-widgets *sideBarItem="'控件'" [canvas]="canvas"></nuwa-widgets>

        @if (components) {
            <nuwa-components *sideBarItem="'组件'" [canvas]="canvas" [components]="components"></nuwa-components>
        }

        @if (galleries) {
            <nuwa-galleries *sideBarItem="'相册'" [canvas]="canvas" [galleries]="galleries"></nuwa-galleries>
        }

        @if (imageBorders) {
            <nuwa-image-borders *sideBarItem="'边框'" [canvas]="canvas"
                                [borders]="imageBorders"></nuwa-image-borders>
        }

        @if (canvas.graph?.getCellCount()) {
            <nuwa-elements *sideBarItem="'元素'" [canvas]="canvas"></nuwa-elements>
        }

        <!--        <nuwa-layers *sideBarItem="'图层'" [renderer]="renderer"></nuwa-layers>-->
        <!--        <nuwa-sources *sideBarItem="'数据源'"></nuwa-sources>-->
        <nuwa-variables *sideBarItem="'变量'" [page]="canvas.page"></nuwa-variables>

        <nuwa-scripts *sideBarItem="'脚本'" [page]="canvas.page"></nuwa-scripts>

    </nuwa-side-bar>
    <div class="content">
        <nuwa-canvas #canvas [page]="project.pages[index]"
                     [style.height]="project.pages[index].height*scale+'px'"
                     [style.width]="project.pages[index].width*scale+'px'"></nuwa-canvas>
    </div>
    <nuwa-side-bar [right]="true" [width]="400">
        <nuwa-page-setting *sideBarItem="'页面属性'" [backgrounds]="backgrounds" [canvas]="canvas"></nuwa-page-setting>
        <nuwa-cell-setting *sideBarItem="'元素属性'" [canvas]="canvas"></nuwa-cell-setting>
        <nuwa-bindings *sideBarItem="'数据绑定'" [canvas]="canvas"></nuwa-bindings>
        <nuwa-listeners *sideBarItem="'事件响应'" [canvas]="canvas" [project]="project"></nuwa-listeners>
    </nuwa-side-bar>
</div>
